<template>
  <h2 v-if="title" class="text-xl font-semibold mb-4">{{ title }}</h2>
  <div class="case-container">
    <!-- 详情展示区 -->
    <!-- 通过vif方式,判断当前currentCase是否有值,做同步显示 -->
    <div class="detail-area" v-if="currentCase">
      <div class="detail-card">
        <h3 class="case-title">
          <span class="case-no">案件编号：{{ currentCase.caseNo }}</span>
        </h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">案件名称：</span>
            <span class="detail-value">{{ currentCase.caseName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">案件线索：</span>
            <span class="detail-value">{{ currentCase.caseClue }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 默认展示 -->
    <div v-else>
      <div class="detail-card">
        <h3 class="case-title">
          <span class="case-no">案件编号：无</span>

        </h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">案件名称：</span>
            <span class="detail-value">无</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">案件线索：</span>
            <span class="detail-value">无</span>
          </div>
        </div>
      </div>
    </div>


    <!-- 下拉选择区 -->
    <div class="select-area">
      <a>选择案件：</a>
      <label for="case-select"></label>
      <select id="case-select" v-model="selectedCaseNo" class="select-box" @change="handleCaseChange">
        <option value="" disabled>-- 请选择案件 --</option>
        <option v-for="caseItem in caseList" :key="caseItem.caseNo" :value="caseItem.caseNo">
          {{ caseItem.caseName }} ({{ caseItem.caseClue }})
        </option>
      </select>
    </div>


  </div>
</template>

<!-- vue3的语法糖形式 -->
<script setup>
import { ref, computed, onMounted, defineProps, defineEmits, defineExpose } from 'vue'
// 定义props
defineProps({
  title: {
    type: String, // 简单的类型声明
    default: "案管信息"
  }
})

// 案件数据
// const caseList = ref([
//   {caseNo:1,caseName:"A",userId:11,caseClue:"a"},
//   {caseNo:2,caseName:"B",userId:11,caseClue:"b"}
// ])
const caseList = ref([])
// const caseList = ref([])

const emit = defineEmits(['change'])
// 请求后端,获取案件数据
const fetchCases = async () => {
  try {
    // const response = await fetch(props.apiUrl)
    const response = [
      { caseNo: 1, caseName: "A", userId: 11, caseClue: "a" },
      { caseNo: 2, caseName: "B", userId: 11, caseClue: "b" }
    ]
    // if (!response.ok) throw new Error('网络响应不正常')
    // caseList.value = await response.json()
    caseList.value = response
  } catch (err) {
    console.error('获取案例列表错误:', err)
  }
}

// 定义参数,选中的案件编号
const selectedCaseNo = ref('')
// 当前显示的案件详情
const currentCase = computed(() => {
  // 根据选中的item的selectCaseNo匹配获取对应的caseList中的案件信息
  return caseList.value.find(item => item.caseNo === selectedCaseNo.value)
})

// 案件选择变更处理
const handleCaseChange = () => {
  // console.log('选中案件:', currentCase.value)
  // 将值传递到app.vue的页面中,方便在全局使用
  // 定义emit的change事件,将casevalue传递出去
  emit('change', currentCase.value)
}

onMounted(() => {
  fetchCases()
})
defineExpose({
  currentCase,
  refresh: fetchCases
})
</script>

<style scoped>
.case-container {
  /* display: flex;
  max-width: 800px;
  margin: 0 auto;
  gap: 2rem;
  padding: 1rem; */
  width: 100%;
  max-width: 95%;
  display: grid;
  /* 启用Grid布局 */
  grid-template-columns: 60% 40%;
  /* 定义两列的宽度比例 */
  column-gap: 2%;
  /* 设置列之间的间隔 */
  padding-left: 1%;
  padding-right: 5%;
  margin: 0 auto;
  /* padding: 2rem; */
}

.select-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select-box {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  background-color: #f8fafc;
  transition: all 0.2s ease;
}

.select-box:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.detail-area {
  flex: 1;
}

.detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.case-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #334155;
}

.case-no {
  color: #64748b;
  font-size: 0.9em;
}

.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem;
}

.detail-label {
  color: #64748b;
  font-weight: 500;
}

.detail-value {
  color: #334155;
}
</style>
